<template>
	<div>
		<div style="position: relative; width: 300px;
	            height: 100px; left: 150px;">
			<a href="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343" class="night" target="blank">{{title}}
		    </a>
		</div>
	
	</div>
</template>

<script>
	export default {
		name:'buttonOne',
		components: {},
		data: () => ({
		
		}),
		props:{
		title:''
		},
		mounted() {
		},
		methods: {
			
		},
	}
</script>

<style>
	.night{
	            position: relative;
	            width: 300px;
	            height: 100px;
	            color: rgb(18, 190, 243);
	            letter-spacing: 12px;
	            font-size: 50px;
	            line-height: 100px;
	            text-align: center;
	            /* background-color: rgb(31, 49, 133); */
	            background-image: linear-gradient(90deg, rgb(40, 62, 161) 50%,rgb(31, 49, 133) 50% );
	            text-transform: uppercase;
	            user-select: none;
	            text-decoration: none;
	            overflow: hidden;
	            box-shadow: inset 0 0 10px rgb(14, 20, 105),
	            0 0 5px rgb(9, 208, 235);
	            transition: all 0.5s;
	            
	        }
	        .night:hover{
	            text-shadow: 0 0 5px rgb(18, 190, 243),
	            0 0 8px rgb(18, 190, 243),
	            0 0 10px rgb(18, 190, 243); 
	            background-image: linear-gradient(90deg, rgb(25, 38, 99) 50%,rgb(13, 22, 58) 50% );
	            box-shadow: inset 0 0 10px rgb(14, 20, 105),
	            0 0 5px rgb(9, 208, 235),
	            0 0 10px rgb(9, 208, 235);
	        }
	            
	      
</style>
